<template>
  <div
    class="card p-3 mb-4 shadow-sm bg-white rounded justify-content-center"
    v-for="item in itemData"
    :key="item._id"
  >
    <h4>
      <router-link :to="`/posts/${item._id}`" class="itemTitle">{{
        item.title
      }}</router-link>
    </h4>
    <div class="my-3 d-flex px-3">
      <div class="col-4">
        <img
          v-if="item.image"
          :src="
            item.image.url + '?x-oss-process=image/resize,m_fill,h_110,w_200'
          "
          alt=""
          class="rounded w-100"
        />
      </div>
      <p class="col-8 text-muted" style="padding-left: 3%">
        {{ item.excerpt }}
      </p>
    </div>
    <p class="text-muted">{{ item.createdAt }}</p>
  </div>
</template>
<script lang='ts'>
import { defineComponent, computed, PropType } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps, ItemProps } from "../../utils/interface";
export default defineComponent({
  name: "ColumnItem",
  components: {},
  props: {
    columnData: {
      type: Array as PropType<ItemProps[]>,
      required: true,
    },
  },
  setup(props) {
    const itemData = computed(() => {
      return props.columnData;
    });
    return {
      itemData,
    };
  },
});
</script>
<style scoped>
.itemTitle {
  text-decoration: none;
  color: #1a1a1a;
}
.itemTitle:hover {
  color: rgb(13, 110, 253);
}
</style>